<template>
	<div class="main-content">
		<div>
			<i-menu mode="horizontal" :active-name="params.status" style="margin-bottom: 10px;" @on-select="changeMenuSelect">
				<Menu-item :name="dimension.recommend">
					推荐人维度
				</Menu-item>
				<Menu-item :name="dimension.premise">
					推荐楼盘维度
				</Menu-item>
			</i-menu>
		</div>
		<div class="search-container">
			<common-select
					:filterable="filterable"
					:multiple="multiple"
					key-field="recommenderUuid"
					show-field="userName"
					val-field="recommenderId"
					:list="recommendList"
					placeholder="全部推荐人"
					v-model="params.recommenderIds"/>
			<common-select
					:multiple="multiple"
					key-field="saleStatus"
					show-field="saleStatusName"
					val-field="saleStatus"
					:list="premisesStatusEnum"
					placeholder="全部楼盘状态"
					v-model="premisesStatus"/>
			<common-select
					:filterable="filterable"
					:multiple="multiple"
					key-field="id"
					show-field="name"
					val-field="id"
					:list="premiseList"
					placeholder="全部楼盘"
					v-model="params.premisesIds"/>
			<el-date-picker
					v-model="date"
					type="daterange"
					range-separator="至"
					start-placeholder="统计时间"
					end-placeholder="">
<!--									:value-format="FORMAT"-->
			</el-date-picker>
			<div style="margin-top: 10px;">
				<Checkbox class="filter-empty" v-model="params.validateData">过滤无业绩统计</Checkbox>
				<button type="button" class="btn" @click="search()">查询</button>
				<button v-if="userAuthResources.indexOf(resourcesList.menu_0007_0008_0001) >= 0" type="button" class="btn" v-on:click="exportData">导出</button>
			</div>
		</div>
		<div class="table-container">
			<el-table
					class="recommend-report-table"
					type="index"
					label="排名"
					show-summary
					:data="tableData"
					:loading="loading"
					>
				<el-table-column
						v-for="item in columns"
						:prop="item.prop"
						:width="item.width"
						:key="item.prop"
						:label="item.label">
				</el-table-column>
			</el-table>
			<div style="margin: 10px; float: right">
				<el-pagination
						background
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="pagination.currentPage"
						:page-sizes='[5, 10, 15, 20, 30, 100]'
						:page-size="pagination.pageSize"
						layout='total, sizes, prev, pager, next, jumper'
						:total="pagination.total">
				</el-pagination>
			</div>
<!--			<common-table-->
<!--				class="recommend-report-table"-->
<!--				type="index"-->
<!--				index-label="排名"-->
<!--				:show-summary="TRUE"-->
<!--				:data="tableData"-->
<!--				:columns="columns"-->
<!--				:loading="loading"-->
<!--				:pagination= 'pagination'-->
<!--				:showHandle="false"-->
<!--				@page-change="pageChange">-->
<!--		</common-table>-->
		</div>
    </div>
</template>
<script>
	import moment from 'moment'
	import CommonSelect from "../../components/common/CommonSelect.vue";
	import CommonTable from "../../components/common/CommonTable.vue";
	import { Service, API, Utils} from "../../js/base"
	const RECOMMEND_DIMENSION = '0'
	const PREMISE_DIMENSION = '1'
	export default{
		name: 'RecommendReport',
		components: {
			CommonSelect,
			CommonTable,
		},
		data () {
			return {
				FORMAT: 'YYYY-MM-DD',
				date: [
					moment().startOf('month'), //.format(this.FORMAT),
					moment()
				],
				dimension: {
					recommend: RECOMMEND_DIMENSION,
					premise: PREMISE_DIMENSION
				},
        TRUE: true,
				multiple: true,
				filterable: true,
				params: {
					pageSize: 10,
					pageNum: 1,
					status: RECOMMEND_DIMENSION, // 统计维度 (按推荐人维度为'0',按楼盘维度为'1')
					recommenderIds: [],
					// premisesStatus: '', // 楼盘状态
					premisesIds: [],
					validateData: false,
					startDate: '',
					endDate: '',
				},
				premiseList: [],
				recommendList: [],
				premisesStatus: '',
				recommendColumns: [{
						prop: 'recommender',
						label: '推荐人姓名'
					}, {
						prop: 'recommenderOrgChart',
						label: '推荐人组织架构'
					},{
						prop: 'premisesCount',
						label: '推荐楼盘个数'
					},
				],
				premiseColumns: [{
						prop: 'premisesName',
						label: '楼盘名称'
					}, {
						prop: 'premisesStatus',
						label: '楼盘状态'
					}, {
						prop: 'recommenderCount',
						label: '推荐过的人员'
					},
				],
				baseColumns: [{
					prop: 'customerCount',
					label: '推荐客户',
				}, {
					prop: 'customerSuccessCount',
					label: '推荐成功客户',
				}, {
					prop: 'visitCustomerCount',
					label: '到访客户',
				}, {
					prop: 'raiseCount',
					label: '认筹客户'
				}, {
					prop: 'purchaseCount',
					label: '认购客户'
				}, {
					prop: 'signCount',
					label: '签约客户'
				}, {
					prop: 'signMoney',
					label: '签约总金额'
				}, {
					prop: 'signRate',
					label: '签约率'
				}],
				columns:[],
				premisesStatusEnum: [
					{saleStatus: 0, saleStatusName: '待售', saleStatusFlag: false},
					{saleStatus: 1, saleStatusName: '在售', saleStatusFlag: true},
					{saleStatus: 2, saleStatusName: '售罄', saleStatusFlag: false},
					{saleStatus: 3, saleStatusName: '下架', saleStatusFlag: false},
				],
				resourcesList: {
					menu_0007_0008_0001: 'menu_0007_0008_0001' //导出
				},
				userAuthResources: window.localStorage.getItem("userAuthResources"),
				tableData: [],
				dataTotal: 0,
				loading: false,
				pagination: {
					total: 0,
					current: 1,
					pageSize: 10,
					pageNum: 1,
				},
			}
		},
		mounted () {
			this.init()
		},
		methods: {
			init() {
				this.getRecommendList()
				this.getPremiseList()
				this.getList()
				this.columns = [...this.recommendColumns, ...this.baseColumns	]
			},
			changeMenuSelect(val) {
				this.params.status = val
			},
			/**
			 * 查询
			 */
			search() {
				this.pagination.current = 1
				this.getList()
			},
			/**
			 * 导出数据
			 */
			exportData() {
				var loadIndex = layer.load();
				let _this = this
				let params = Utils.deepClone(this.params)
				params.userId = window.localStorage.getItem("1_userId");
				params.loginType = '1';
				delete params.pageSize
				delete params.pageNum
				params.startDate =	params.startDate ? moment(params.startDate).format("YYYY-MM-DD") : ''
				params.endDate =	params.endDate ? moment(params.endDate).format("YYYY-MM-DD") : ''

				let intervalDays = this.utils.intervalTime(params.startDate, params.endDate);
				if(intervalDays > 31){
					layer.close(loadIndex);
					layer.msg("单次最多获取31天的数据!");
					return false;
				}

				const api = params.status === PREMISE_DIMENSION? API.DATA_CENTER.EXPORT_RECOMMEND_PREMISE_LIST : API.DATA_CENTER.EXPORT_RECOMMEND_REPORT_LIST
				let url = this.utilHelper.apiUrl + api + '?' + Utils.stringfiyParams(params, 'params.')
				window.location.href = url
				layer.close(loadIndex);
			},
			/**
			 * 获取列表数据
			 * @param params
			 */
			getList () {
				var loadIndex = layer.load();
				let _this = this
				let params = Utils.deepClone(this.params)
				params.pageNum = this.pagination.current
				params.pageSize = this.params.pageSize
				params.startDate =	params.startDate ? moment(params.startDate).format("YYYY-MM-DD") : ''
				params.endDate =	params.endDate ? moment(params.endDate).format("YYYY-MM-DD") : ''

				let intervalDays = this.utils.intervalTime(params.startDate, params.endDate);
				if(intervalDays > 31){
					layer.close(loadIndex);
					layer.msg("单次最多获取31天的数据!");
					return false;
				}

				_this.loading = true
				Service.DataCenter.getRecommendReportList({params, _this}).then(rsp => {
					layer.close(loadIndex);
					_this.tableData = rsp.rows
					_this.pagination.total = rsp.total || 0
					_this.loading = false
				}).catch(error => {
					_this.loading = false
					layer.close(loadIndex);
				})
			},
			/**
			 * 获取楼盘列表
			 */
			getPremiseList(val = '') {
				let premisesStatus = ''
				this.premiseList = []
				if(val) {
					premisesStatus = val.join(',')
				}
				let params = {
					premisesStatus: premisesStatus,
				}

				let _this = this
				Service.Premise.getPremisesListByStatus({
					params,
					_this,
				}).then(rsp => {
					this.premiseList = rsp.inPremisesList
				})
			},
			/**
			 * 获取推荐人列表
			 */
			getRecommendList() {
				const _this = this
				let params = {
					id: '1'
				}
				Service.Recommend.getChannelAllRecommendList({params, _this}).then(rsp => {
					_this.recommendList = rsp.list
				})
			},
			handleSizeChange (val) {
				this.params.pageSize = val
				this.getList()
			},
			handleCurrentChange (val) {
				this.pagination.current = val
				this.getList()
			},

			// sizeChange (val) {
			// 	this.params.pageSize = val
			// 	this.getList()
			// },
			/**
			 * 翻页触发
			 * @param val
			 */
			// pageChange (val) {
			// 	console.log(val)
			// 	this.pagination.current = val.pageNo || this.pagination.current
			// 	this.params.pageSize = val.pageSize || this.params.pageSize
			// 	this.getList()
			// },
		},
		watch: {
			premisesStatus(val) {
				this.getPremiseList(val)
			},
			date:{
				handler(val) {
					let startDate = ''
					let endDate = ''
					if(val && Array.isArray(val)){
						startDate = val[0]
						endDate = val[1]
					}
					if(this.params) {
						this.params.startDate = startDate
						this.params.endDate = endDate
					}

				},
				immediate: true,
				deep: true
			},
			'params.status': {
				handler(val) {
					if(val === RECOMMEND_DIMENSION) {
						this.columns = [...this.recommendColumns, ...this.baseColumns]
					} else {
						this.columns = [...this.premiseColumns, ...this.baseColumns]
					}
					this.getList()
				},
				immediate: true,
				deep: true
			}
		}
	}
</script>
<style>
	.recommend-report-table .el-table th{
		background-color: #F5F7FA;
	}
</style>
<style scoped lang="less">
	.search-container {
		padding: 20px 0;
		.filter-empty {
			padding: 0 10px;
		}
		.btn {
			background-color: #f87242;
			color: #fff
		}
	}
</style>
